<template>
	<view>
		<u-navbar :is-back="true" :is-fixed="true" title="品牌积分榜"></u-navbar>
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false">
		<view class="mt-3 pl-2 pr-2">
			<view v-for="(item, itemIndex) in tabContents" :key="itemIndex">
				<view class="dfex mt-3">
					<view class="dfes">
						<view
							:class="['pr-2 font-20', {'index-color-1': (itemIndex % 3) === 0 && itemIndex < 3, 'index-color-2': (itemIndex % 3) === 1 && itemIndex < 3, 'index-color-3': (itemIndex % 3) === 2 && itemIndex < 3, 'font-color-gray': itemIndex >= 3 }]">
							{{ itemIndex + 1 }}
						</view>
						<img style="width: 35px; height: 35px; border-radius: 100%" :src="item.Image" />
						<text class="ml-2 font-14 text-333333">{{ item.name }}</text>
					</view>
					<text class="text-78AB06 font-16">{{ item.fouShu }} 积分</text>

				</view>
				<!-- 黑名单, 品牌执法 -->

				<!-- <view class="u-line pb-2">
					<view class="dfex ">
						<view>{{item.name}}</view>
						<view>2024-2-16</view>
					</view>
					<view class="mt-2 text-999999 font-12">华东政法大学</view>
				</view>
				-->

			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabContents: [{
						name: '内容1',
						Image: '/static/logo.png',
						fouShu: 100
					},
					{
						name: '内容2',
						Image: '/static/logo.png',
						fouShu: 200
					},
					{
						name: '内容2',
						Image: '/static/logo.png',
						fouShu: 200
					},
					{
						name: '内容2',
						Image: '/static/logo.png',
						fouShu: 200
					}

				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.index-color-1 {
		font-size: 22px;
		color: #FF0000;
	}

	.index-color-2 {
		font-size: 22px;
		color: #17a2b8;
	}

	.index-color-3 {
		font-size: 22px;
		color: #FFC251;
	}
</style>